<script setup lang='ts'>
  import { nextTick, computed, reactive, ref } from 'vue';
  import { equipApi } from '@/api/controller';
  import { ToastSuccess, Toastloading, allNumber } from '@/utils/public';
  const formLabelWidth = '130px'
  const dataForm = ref()
  const $emit = defineEmits(['updateList'])
  const action = reactive({
    dialogFormVisible:false,
    disabled:false,
    title:'',
    game_id:0,
    pool_one_list:[] as Array<any>,
    pool_one_id:'',
    pool_two_list:[] as Array<any>,
    pool_two_id:'',
  })
  interface whiteQuery {
    pollTwoId:number,
    num:number
  }
  interface formQuert {
    white_id:number
    content:string
    num_st:number | string
    num_ed:number | string
    white_reward:Array<whiteQuery>
  }
  let form = reactive({} as formQuert)
  const validateWhite = (rule: any, value: any, callback:any)=>{
    if( Array.isArray(value) && value.findIndex((res:any)=>res.num < 1) > -1) {
      callback(new Error('请填写完整的产出信息'))
    } else {
      callback()
    }
  }
  const formRules = {
    content: [{ required: true, trigger: 'blur', message: '请输入描述' }],
    num_st: [{ required: true, trigger: 'blur', message: '请输入次数起始' }],
    num_ed: [{ required: true, trigger: 'blur', message: '请输入次数截止' }],
    white_reward: [
      { required: true, trigger: "submit", validator:validateWhite },
    ],
  }
  const handleSubmit = ()=>{
    dataForm.value.validate(async(valid:any)=>{
      if(!valid) return
      const loading = Toastloading()
      const data = JSON.parse(JSON.stringify(form))
      data.white_reward = JSON.stringify(data.white_reward)
      equipApi.whiteConfigAdd(data).then(res=>{
        loading.close()
        ToastSuccess('新增白名单配置成功')
        closeDialog()
        $emit('updateList')
      }).catch(()=>{
        loading.close()
      })
    })
  }
  const getPool_one_list = async()=>{
    const loading = Toastloading()
    const res = await equipApi.poolOneList({
      game_id:action.game_id
    })
    action.pool_one_id = ''
    action.pool_two_id = ''
    loading.close()
    const { data=[] } = res || {}
    action.pool_one_list = data
  }
  const getPool_Two_list = async()=>{
    const loading = Toastloading()
    const res = await equipApi.poolTwoList({
      pool_one_id:action.pool_one_id
    })
    action.pool_two_id = ''
    loading.close()
    const { data=[] } = res || {}
    action.pool_two_list = data
  }
  const handleTwoPool = ()=>{
    const obj = action.pool_two_list.find(res=>res.id == action.pool_two_id)
    const index = form.white_reward ? form.white_reward.findIndex(res=>res.pollTwoId == obj.id) : -1
    if(index < 0 && obj.id) form.white_reward.push({
      pollTwoId:obj.id,
      num:0
    })
  }
  const openDialog = async(query:any = {})=> {
    const {
      white_id='', game_id=0
    } = query
    action.title = '新增白名单配置'
    Object.assign(form,{
      white_id,
      white_reward:[],
      num_st:'',
      num_ed:'',
      content:''
    })
    action.game_id = game_id
    await getPool_one_list()
    action.dialogFormVisible = true
  }
  const closeDialog = ()=>{
    form = reactive({} as formQuert)
    nextTick(() => {
      dataForm.value.clearValidate();
    });
    action.dialogFormVisible = false
  }
  defineExpose({
    openDialog
  })
</script>

<template>
  <div>
    <el-dialog
    top="5vh"
    class="xm-dialog input-width"
    v-model="action.dialogFormVisible"
    :close-on-click-modal="action.disabled"
    :show-close="action.disabled"
    :close-on-press-escape="action.disabled"
    width="55%"
    :title="action.title">
      <el-form ref="dataForm" :model="form" :rules="formRules">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="次数起始" prop="num_st">
              <el-input v-model="form.num_st" type="number" placeholder="请输入次数起始" />
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="一级礼物池" prop="pool_one_id">
              <el-select v-model="action.pool_one_id" @change="getPool_Two_list" clearable placeholder="请选择一级礼物池">
                <el-option
                  v-for="item in action.pool_one_list"
                  :label="item.item_name"
                  :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="二级礼物池" prop="pool_two_id">
              <el-select v-model="action.pool_two_id" filterable @change="handleTwoPool" clearable placeholder="请选择二级礼物池">
                <el-option
                  v-for="item in action.pool_two_list"
                  :label="`男:${item.man_equip_name}-女:${item.girl_equip_name}`"
                  :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="次数截止" prop="num_ed">
              <el-input v-model="form.num_ed" type="number" placeholder="请输入次数截止" />
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="白名单描述" prop="content">
              <el-input
                :disabled="action.disabled"
                v-model="form.content"
                :autosize="{ minRows: 6, maxRows: 6}"
                type="textarea"
                placeholder="请输入白名单描述"
              />
            </el-form-item>
          </el-col>
          <template v-if="form.white_reward">
            <el-form-item v-for="obj in form.white_reward" :label-width="formLabelWidth" label="产出信息" prop="white_reward">
              <el-input v-model="obj.num" @input="allNumber(obj,'num')" placeholder="请输入数量">
                <template #prepend>ID：{{ obj.pollTwoId }}</template>
              </el-input>
            </el-form-item>
          </template>

        </el-row>

      </el-form>
      <template v-if="!action.disabled" #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary" @click="handleSubmit()">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
